<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/static/css/mini-nord.min.css">
  <link rel="stylesheet" href="/static/iconfont/iconfont.css">
  <title>萌点后台管理系统</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #header{
      height:56px;
      width: 100%;
      border:1px solid rgba(3,119,165,100);
      background:rgba(3,119,165,100);
      position:fixed;
      z-index: 999;
    }
    #header a{
      color:black;
      text-decoration:none;
    }
    #header a:hover{
      color: #df5621;
    }
    #h2{
      color: white;
    }
    .daohang{
      list-style-type: none;
      margin:0;
      padding:0;
    }
    .daohang li{
      display: block;
      height: 70px;
      text-align:center;
      line-height: 5px;
      color: white;
    }
    .daohang li:hover{
      background-color: white;
      color:rgba(3,119,165,100);
    }
    #left{
      position: fixed;
      top:56px; width:5%; 
      height: 100%; left: 0; 
      background-color:rgba(3,119,165,100)
    }
    #userinfo{
      color:white;
      position: absolute;
      right: 100px;
      top: 20px
    }
    #userlist {
      position:absolute;
      top:68px;
      width:80%;
      margin-left:200px ;
    }
    #userlist th {
      padding: 8px;
    }
    #userlist td {
      padding: 0px;
      font-size: 13px;
    }
    .content{
      margin:0px auto;
      float: left;
    }
    ul li{
      list-style: none;
    }
    label {
      display:inline-block; 
      width: 10em; 
      margin-right: 1em; 
      text-align: right; 
    }
  </style>
</head>
<body>
  <div id='header'>
    <div id='h2'>
      <h2 style='margin-left: 50px;'>萌点后台管理系统</h2>
    </div>
    <div id="userinfo" class="userinfo"></div>
  </div>
  <div>
      <div id='left'>
        <ul class="daohang">
          <li onclick="toHome()">
            <i style="font-size:25px" class='iconfont iconshouye'></i>
            <p style="font-size:10px">首页</p>
          </li>
          <li onclick="toDongtai()">
            <i style="font-size:25px" class='iconfont iconfaburenwu'></i>
            <p style="font-size:10px">动态</p>
          </li>
          <li onclick="toUser()">
            <i style="font-size:25px" class='iconfont iconyonghu'></i>
            <p style="font-size:10px">用户</p>
          </li>
          <li onclick="toAdmin()">
            <i style="font-size:25px" class='iconfont iconyonghu1'></i>
            <p style="font-size:10px">管理员</p>
          </li>
          <li onclick="toElse()">  
            <i style="font-size:25px" class='iconfont iconguanli'></i>
            <p style="font-size:10px">管理</p>
          </li>
        </ul>
      </div>
      <div id='userlist'></div>
  </div>
  <script>
    var content=document.getElementById('content')
    //登录判断
    function getToken () {
      return localStorage.getItem('token') || ''
    }
    function getMyInfo () {
      let uinfo = localStorage.getItem('userinfo')
      if (uinfo) {
        try {
          return JSON.parse(uinfo)
        } catch (err) {
          return null
        }
      }
      return null
    }
    function checkLogin() {
      let tk = getToken()
      if (!tk) {
        location.href = '/login'
        return
      }
      let uinfo = getMyInfo()
      if (uinfo === null) {
        location.href = '/login'
      } else {
        //登录超时
        if (uinfo.time + uinfo.expires < Date.now()) {
          localStorage.removeItem('token')
          localStorage.removeItem('userinfo')
          location.href = '/login'
        }
      }
    }
    //检测是否登录并跳转
    checkLogin()
    
    //跳转函数
    function toDongtai(){
      location.href='/dongtai'
    }
    function toHome(){
      location.href='/home'
    }
    function toUser(){
        location.href='/user'
    }
    function toAdmin(){
        location.href='/admin'
    }
    function toElse(){
      location.href='/else'
    }
    //fetch封装
    function apicall (path, options = {}) {
      let token = getToken()
      let q = '?'
      if (path.indexOf('?') > 0) {
        q = '&'
      }
      path = `${path}${q}token=${token}`
      return fetch(path, options).then(async res => {
        if (!res.ok) {
          let errtext = await res.text()
          throw new Error(`${res.status} : ${errtext}`)
        } else {
          return res.text()
        }
      })
    }

    //登录用户信息
    function getUserInfo (id) {
      return apicall('/user/admin/'+id).then(d => {
        let uinfo = JSON.parse(d)
        showUserInfo(uinfo)
      })
      .catch(err => {
        alert(err.message)
      })
    }
    function showUserInfo (u) {
      let html = `
        <a style='color:white' href='/manage'>${u.username}</a>
        <a href="javascript:logout(this);">
          退出
        </a>
      `
      document.getElementById('userinfo').innerHTML = html
    }

    //退出登录
    function logout () {
      if (!confirm('确定退出？')) {
        return
      }
      localStorage.removeItem('token')
      localStorage.removeItem('userinfo')
      location.href = '/login'
    }

    //得到管理员个人信息
     function getSelfInfo (id) {
      return apicall('/user/admin/'+id).then(d => {
        let uinfo = JSON.parse(d)
        showSelfInfo(uinfo)
      })
      .catch(err => {
        alert(err.message)
      })
    }

    let adminMsg={
      username:'',
      nickname:'',
      sex:'',
      birthday:'',
      email:'',
      words:'',
      addr:'',
      position:'',
      time:'',
      descrip:''
    }
    function cacheInput (t) {
      if (t.name === 'username') {
        adminMsg.username = t.value.trim()
      } else if (t.name === 'nickname') {
        adminMsg.nickname = t.value
      }else if (t.name === 'sex') {
        adminMsg.sex = t.value
      }else if (t.name === 'birth') {
        adminMsg.birthday = t.value
      }else if (t.name === 'email') {
        adminMsg.email = t.value
      }else if (t.name === 'words') {
        adminMsg.words = t.value
      }else if (t.name === 'addr') {
        adminMsg.addr = t.value
      }else if (t.name === 'position') {
        adminMsg.position = t.value
      }else if (t.name === 'time') {
        adminMsg.time = t.value
      }else if (t.name === 'descrip') {
        adminMsg.descrip = t.value
      }
    }
    //展示管理员个人信息
    function showSelfInfo (u) {
      adminMsg={
      username:u.username,
      nickname:u.nickname,
      sex:u.sex,
      birthday:u.birth,
      email:u.email,
      words:u.words,
      addr:u.addr,
      position:u.position,
      time:u.time,
      descrip:u.descrip
    }
      let birth=u.birth.slice(0,10)
      let time=u.time.slice(0,10)
      let html = `
      <p>>个人资料</p>
        <ul class='content'>
        <li><label>管理员名：</label><input type='text' name='username' onchange='cacheInput(this)' value="${u.username}"/></li>
        <li><label>昵称：</label><input type='text' name='nickname' onchange='cacheInput(this)' value="${u.nickname}"/></li>
        <li><label>性别：</label><input type='text' name='sex' onchange='cacheInput(this)' value="${u.sex}"/></li>
        <li><label>生日：</label><input type='text' name='birth' onchange='cacheInput(this)' value="${birth}"/></li>
        <li><label>邮箱：</label><input type='text' name='email' onchange='cacheInput(this)' value="${u.email}"/></li>
      </ul>
      <ul>
        <li><label>个性签名：</label><input type='text' name='words' onchange='cacheInput(this)' value="${u.email}"/></li>
        <li><label>所在地：</label><input type='text' name='addr' onchange='cacheInput(this)' value="${u.addr}"/></li>
        <li><label>职位：</label><input type='text' name='position' onchange='cacheInput(this)' value="${u.position}"/></li>
        <li><label>登记时间：</label><input type='text' name='time' onchange='cacheInput(this)' value="${time}"/></li>
        <li><label>个人描述：</label><input type='text' name='descrip' onchange='cacheInput(this)' value="${u.descrip}"/></li>
      </ul>
      <button onclick="submitChange('${u.id}')" style='margin-left:40%;margin-top:60px;border:1px solid rgba(3,119,165,100)'>提交修改</button>
      `
      userlist.innerHTML = html;
    }
    
    function submitChange(id){
      apicall('/user/admin/'+id,{
        method:'PUT',
        headers : {
          'content-type' : 'text/plain;charset=utf-8'
        },
        body:JSON.stringify(adminMsg)
      }).then(d => {
        console.log(d)
      }).catch(err => {
        alert(err.message)
      })
      alert('修改信息成功')
      location.href='/manage'
    }

    window.onload = () => {
      getUserInfo('self')
      getSelfInfo('self')
    }

  </script>
</body>
</html>
